<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus';
import { User, Crop, EditPen, SwitchButton } from '@element-plus/icons-vue';
import avatarSvg from '@/assets/默认头像.svg';
import { useUserStore } from '@/stores';

const userStore = useUserStore();
const router = useRouter();

const onCommand = async (command) => {
    if (command === 'logout') {
        await ElMessageBox.confirm('你确认退出白蚁识别吗？', '温馨提示', {
            type: 'warning',
            confirmButtonText: '确认',
            cancelButtonText: '取消'
        });
        userStore.removeToken();
        userStore.setUser({});
        router.push(`/login`);
    } else {
        router.push(`/user/${command}`);
    }
};

const dropdownVisible = ref(false);

const handleDropdownShow = () => {
    dropdownVisible.value = true;
};

const handleDropdownHide = () => {
    dropdownVisible.value = false;
};
</script>

<template>
    <div class="avatar">
        <el-dropdown placement="bottom" @command="onCommand"
            @visible-change="(visible) => { if (visible) handleDropdownShow(); else handleDropdownHide(); }">
            <span class="el-dropdown__box">
                <el-avatar :src="avatarSvg" :class="{ 'avatar-hover-effect': dropdownVisible }" />
            </span>

            <template #dropdown>
                <el-dropdown-menu class="custom-dropdown-menu" style="width: 160px; height: 150px;">
                    <div class="dropdown-header">
                        欢迎您，{{
                            userStore.user.name ||
                            userStore.user.username || "游客" }}</div>
                    <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
                    <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                    <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
                    <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<style lang="scss" scoped>
.avatar {
    width: 100px;
    display: flex;
    justify-content: center;
}

.el-dropdown__box {
    position: relative;
    display: flex;
    align-items: center;

    .el-avatar {
        background-color: #fff;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        z-index: 10000;
    }

    .el-avatar.avatar-hover-effect {
        transform: translate(-10px, 25px) scale(1.7);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .el-icon {
        color: #999;
        margin-left: 10px;
    }

    &:hover,
    &:active,
    &:focus {
        outline: none;
    }
}

.custom-dropdown-menu {
    padding: 20px 0;
    // border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: #fff;

    .dropdown-header {
        text-align: center;
        padding: 15px 0 5px 0;
        font-weight: 450;
        font-size: 17px;
    }

    .el-dropdown-menu__item {
        padding: 15px 30px;
        font-size: 16px;

        &:hover {
            background-color: #f0f0f0;
        }
    }
}
</style>
